<template>
  <div class="app-info source-box my-work">
    <el-form ref="form" :model="formInline" :rules="rules" size="small" label-position="left" label-width="120px">
      <el-row :gutter="20">
        <el-col :span="16" class="item-height">
          <el-form-item label="抄送名称" prop="taskTitle">
            <el-input class="full-width" maxlength="50" placeholder="请输入流程名称" v-model.trim="formInline.taskTitle"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8" class="item-height">
          <el-form-item label="抄送类型" prop="taskType">
            <el-select v-model="formInline.taskType" class="full-width" placeholder="请选择类型">
              <el-option label="知会" value="1"></el-option>
              <el-option label="任务" value="2"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="24" class="item-height">
          <el-form-item label="流程内容展示">
            <el-select v-model="formInline.serverBindLabel" class="full-width" placeholder="请选择类型" multiple>
              <el-option v-for="(item, index) in formItemKeyOptions" :key="index" :label="item.itemName" :value="item.serverBindLabel"> </el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <!--<el-col :span="24" class="item-height">-->
        <!--<el-form-item label="开始回掉API" prop="startCallBackApi">-->
        <!--<el-input v-model="formInline.startCallBackApi" maxlength="600" class="input-box" placeholder="提审时调用"></el-input>-->
        <!--</el-form-item>-->
        <!--</el-col>-->
        <el-col :span="24" class="item-height">
          <el-form-item label="结束回掉API" prop="endCallBackApi">
            <el-input v-model="formInline.endCallBackApi" maxlength="600" class="input-box" placeholder="流程结束(审批完成/驳回)时调用"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item label="描述">
            <el-input type="textarea" class="full-width" :autosize="{ minRows: 2, maxRows: 6 }" v-model="formInline.taskDesc" placeholder="" maxlength="1000" show-word-limit></el-input>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button type="primary" size="mini" @click="submitForm">保存</el-button>
    </div>
  </div>
</template>

<script>
  import { apiCcManageAdd, formItemList, apiFormDetail, apiCcManageDetail, apiCcManageUpdate } from '../../../api/process';
  export default {
    data() {
      return {
        formInline: {
          taskTitle: '', //抄送名称
          taskType: '', //抄送分类
          serverBindLabel: [], //抄送内容
          startCallBackApi: '', //开始回调
          endCallBackApi: '', //结束回调
          taskDesc: '', //描述
        },
        rules: {
          taskTitle: [
            {
              required: true,
              message: '请输抄送名称！',
              trigger: ['blur'],
            },
          ],
          taskType: [
            {
              required: true,
              message: '请选择抄送分类！',
              trigger: [''],
            },
          ],
          message: [
            {
              required: true,
              message: '请输入消息内容！',
              trigger: 'change',
            },
          ],
        },
        formItemKeyOptions: [],
      };
    },
    components: {},
    mounted() {
      this.getCcContentSelect();
      if (!!this.$route.query.type) {
        this.getInfo();
      }
    },
    methods: {
      //提交表单时校验
      submitForm() {
        this.$refs.form.validate(valid => {
          if (valid) {
            // 防止频繁保存
            let that = this;
            if (this.ISPOST) {
              this.$message({
                message: '操作太频繁！',
                type: 'warning',
              });
              return;
            }

            this.ISPOST = true;
            setTimeout(() => {
              that.ISPOST = false;
            }, 3000);

            this.save();
          } else {
            this.$message({
              message: '请输入必填项!',
              type: 'warning',
            });
          }
        });
      },
      //保存
      async save() {
        if (!!this.$route.query.key) {
          let formItemKey = this.formInline.serverBindLabel.map(item => item).join(',');
          const result = await apiCcManageUpdate({
            taskTitle: this.formInline.taskTitle,
            taskType: this.formInline.taskType,
            formItemKey,
            startCallBackApi: this.formInline.startCallBackApi,
            endCallBackApi: this.formInline.endCallBackApi,
            taskDesc: this.formInline.taskDesc,
            processCode: this.$route.query.processCode,
            primaryKey: this.$route.query.key,
          });

          if (result.success) {
            this.$emit('setCCmanagerName', this.formInline.taskTitle);
            let params = {
              key: this.$route.query.key ? this.$route.query.key : result.key,
              tab: this.$route.query.tab,
              strucCode: this.$route.query.key ? this.$route.query.strucCode : result.extend.struc_code,
              ccType: 'cc',
            };
            if (this.$route.query.key && this.$route.query.primaryKey) {
              params.primaryKey = this.$route.query.primaryKey;
            }
            let pathUrl = {
              name: 'manageDetil',
              query: params,
            };
            this.$router.replace(pathUrl);
          } else {
            this.$message.error(result.message);
          }
        } else {
          this.$emit('setCCmanagerName', this.formInline.taskTitle);
          let formItemKey = this.formInline.serverBindLabel.map(item => item).join(',');
          const res = await apiCcManageAdd({
            taskTitle: this.formInline.taskTitle,
            taskType: this.formInline.taskType,
            formItemKey,
            startCallBackApi: this.formInline.startCallBackApi,
            endCallBackApi: this.formInline.endCallBackApi,
            taskDesc: this.formInline.taskDesc,
            processCode: this.$route.query.processCode,
            primaryKey: this.$route.query.key,
          });
          if (res.success) {
            let params = {
              key: this.$route.query.key ? this.$route.query.key : res.key,
              strucCode: this.$route.query.key ? this.$route.query.strucCode : res.extend.struc_code,
              ccType: 'cc',
            };
            if (this.$route.query.key && this.$route.query.primaryKey) {
              params.primaryKey = this.$route.query.primaryKey;
            }
            let pathUrl = {
              name: 'manageDetil',
              tab: this.$route.query.tab,
              query: params,
            };
            this.$router.replace(pathUrl);
          } else {
            this.$message.error(res.message);
          }
        }
      },
      //查询下拉
      async getCcContentSelect() {
        const result = await apiFormDetail(this.$route.query.processPrimaryKey);
        if (!!result) {
          const res = await formItemList({
            formKey: this.$route.query.processPrimaryKey,
            formVersion: result.formVersion,
          });
          if (res.success) {
            this.formItemKeyOptions = res.rows;
          }
        }
      },
      //获取详情
      async getInfo() {
        const res = await apiCcManageDetail(this.$route.query.key);
        if (res.success) {
          this.formInline.taskTitle = res.taskTitle;
          this.formInline.taskType = res.taskType.toString();
          this.formInline.startCallBackApi = res.startCallBackApi;
          this.formInline.endCallBackApi = res.endCallBackApi;
          this.formInline.taskDesc = res.taskDesc;
          if (!!res.formItemKey) {
            this.formInline.serverBindLabel = res.formItemKey.split(',');
          }
          this.$emit('setCCmanagerName', this.formInline.taskTitle);
        }
      },
    },
  };
</script>

<style lang="scss" scoped>
  .log .label {
    line-height: 1.5;
    white-space: pre-line;
  }

  .split-line {
    width: 100%;
    font-size: 15px;
    font-weight: 700;
    /* border-bottom: 1px solid #f1f1f1; */
    padding: 15px 0;
  }
  .dialog-footer {
    display: flex;
    justify-content: flex-end;
  }
  .item-height {
    height: 51px;
  }
</style>
